<template>
  <div class="pg-login"
    layout layout-align="center center">
    
    <!-- 登录主体
    -------------------------- -->
    <div class="pg-login__container"
      layout="column" layout-align="start center">

      <img class="pg-login__logo" :src="logoImg">
      <p class="pg-login__desc">久多运营管理平台</p>

      <!-- 登录表单
      -------------------------- -->
      <form class="pg-login__form"
        name="loginForm"
        @submit.prevent="login"
        layout="column">
        <!-- 账号 -->
        <el-input v-model="UsernameCtrl.value"
          :ref="UsernameCtrl.ref"
          :placeholder="UsernameCtrl.name"></el-input>
        <!-- 密码 -->
        <el-input v-model="PasswordCtrl.value"
          :ref="PasswordCtrl.ref"
          :placeholder="PasswordCtrl.name"
          type="password"></el-input>
        <div layout layout-align="between center">
          <!-- 允许自动登录 -->
          <!-- <el-checkbox v-model="autoLogin"
            class="pg-login__checkbox">一个月内自动登录</el-checkbox> -->
          <!-- 记住密码 -->
          <el-checkbox v-model="remeberMe"
            class="pg-login__checkbox">记住密码</el-checkbox>
        </div>
        <!-- 登录按钮 -->
        <el-button type="primary"
          native-type="submit"
          :loading="isLogining"
          class="pg-login__login-btn"
          flex>{{ this.isLogining ? '登录中' : '登 录' }}</el-button>
      </form>
    </div>
  </div>
</template>

<script>
import logoImg from 'assets/images/login-logo.jpg'

import { FormVerifingMixin } from 'services/Public'
import { LoginService } from 'services/Api'

export default {
  name: 'PgLogin',
  mixins: [ FormVerifingMixin ],
  data () {
    return {
      logoImg,
      UsernameCtrl: this.newFormCtrl('账号', 'username'), // 账号
      PasswordCtrl: this.newFormCtrl('密码', 'passowrd'), // 密码
      autoLogin: false, // 自动登录
      remeberMe: false, // 记住密码
      isLogining: false // 正在登录中
    }
  },
  computed: {
    loginParam () {
      return {
        uid: this.UsernameCtrl.value,
        pwd: this.PasswordCtrl.value
      }
    }
  },
  methods: {
    async login () {
      // 验证是否为空
      const [ EmptyErr ] = await this.FormVerifyEmpty(this.UsernameCtrl, this.PasswordCtrl)
      if (EmptyErr) return
      // 调用登录接口
      this.isLogining = true
      const [ loginErr, res ] = await LoginService.login(this.loginParam)
      this.isLogining = false
      if (loginErr) return this.$message.error(loginErr.message)
      // 登录成功操作
      this.$store.commit('SetUserInfo', res)
      this.$message.success('登录成功')
      this.$router.push({ name: 'ShaohuoPersonList' })
    }
  }
}
</script>

<style lang="scss">
@import "src/styles/config/views.scss";

@include b(login) {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-image: url('../../../../assets/images/login-bg2.jpg');
  background-size: cover;
  background-position: center;

  @include e(logo) {
    width: 76px;
  }
  @include e(desc) {
    padding: 25px 0;
    font-size: 12px;
    letter-spacing: 2px;
    color: $--color-text-description;
  }
  @include e(form) {
    width: 380px;
    transition: width .3s linear;
    box-shadow: $--box-shadow-base;
    padding: 30px;
    margin: $--margin-base * 2.4 0;
    & > * {
      margin: $--margin-base * 1.6 0;
      transition: margin .3s linear;
    }
    @include e(checkbox) {
      .el-checkbox__label {
        font-size: 13px;
        color: $--color-text-secondary;
      }
    }
    @include e(login-btn) {
      margin-top: 45px;
      transition: margin-top .3s linear;
    }

    @include layout(('md', 'sm')) { 
      width: 340px;
      margin: $--margin-base * 1.6 0;
      & > * { margin: $--margin-base * 1.2 0; } 
    }
    @include layout('xs') { 
      width: 300px;
      margin: $--margin-base * 1 0;
      & > * { margin: $--margin-base * 0.8 0; }
    }
    @include layout(('md', 'sm', 'xs')) {
      @include e(checkbox) { .el-checkbox__label { font-size: 12px; } }
      @include e(login-btn) { margin-top: 35px; }
    }
  }
}
</style>
